<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		ul {
			display: flex;
			flex-wrap: wrap;
			width: 210px;
		}

		li {
			list-style: none;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #ee7a6a;
			color: #fff;
			text-align: center;
			line-height: 50px;
			margin: 10px;
		}

		button {
			background-color: skyblue;
			color: #fff;
			padding: 10px;
			border: none;
			margin: 10px;
			border-radius: 5px;
		}

		.list-move {
			transition: .5s;
		}

		.list-enter-from {
			/* 起点 */
			transform: translateY(-100px);
		}

		.list-enter-active,
		.list-leave-active {
			/* 路程 */
			transition: .5s;
		}

		.list-leave-to {
			/* 终点 */
			transform: translateY(100px);
			opacity: 0;
		}
	</style>
	<body>
		<div id="app">
			<button @click="order(1)">升序</button>
			<button @click="order(2)">降序</button>
			<button @click="order(3)">乱序</button>
			<button @click="add(1)">添加到第一个</button>
			<button @click="add(2)">添加到末尾</button>
			<button @click="del(1)">删除第一个:shift</button>
			<button @click="del(2)">删除最后一个:pop</button>
			<!-- <button @click="del(0,list.length-3)">删除最后3个</button> -->
			<button @click="del(0,0)">删除前3个</button>
			<button @click="list.splice(list.length-1,0,999)">添加到倒数第2个</button>
			<ul>
				<li v-for='item in list'>{{item}}</li>
			</ul>
			<hr>
			过渡
			<transition-group tag='ul' name='list'>
				<li v-for='item in list' :key='item'>{{item}}</li>
			</transition-group>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
						max: 9
					}
				},
				methods: { //方法
					order(type) {
						if (type == 2) {
							//数组名称.sort((a,b)=>b-a)
							this.list.sort((a, b) => b - a)
						} else if (type == 1) {
							this.list.sort((a, b) => a - b)
						} else {
							// <0 =0 >0
							//(0-1)-0.5
							this.list.sort(() => Math.random() - 0.5)
						}
					},
					add(type) { //添加
						this.max++
						if (type == 1) {
							this.list.unshift(this.max)
						} else {
							this.list.push(this.max)
						}
					},
					del(type, i) { //删除   i:开始的下标
						if (type == 1) {
							this.list.shift()
						} else if (type == 2) {
							this.list.pop()
						} else {
							//删除第5个
							this.list.splice(i,3)//开始的下标，删除的数量
						}
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>